<script setup>
import { ref, watch, onMounted, nextTick } from 'vue';
import { useRouter, useRoute } from 'vue-router'

const router = useRouter()
const route = useRoute()

watch(
  () => route,
  (newValue, oldValue) => {
    console.log("split后的path中最后一个元素：", newValue.path.split('/')[newValue.path.split('/').length - 1])
    let lastName = newValue.path.split('/')[newValue.path.split('/').length - 1]
    nextTick(() => {
      // 先排异
      document.querySelector('.nav-item.active').classList.remove('active')
      // 添加active类
      document.querySelector(`#${lastName}`).classList.add('active')
    })
  },
  { immediate: true, deep: true }
)
</script>

<template>
  <div class="left-nav">
    <ul>
      <li>
        <router-link id="article" :to="`/userCenter/${route.params.userId}/article`" class="nav-item active">
          <span class="iconfont icon-bianjiwenzhang_huaban"></span>
          <span class="nav-item-text">文章管理</span>
        </router-link>
      </li>
      <li>
        <router-link id="comment" :to="`/userCenter/${route.params.userId}/comment`" class="nav-item">
          <span class="iconfont icon-review"></span>
          <span class="nav-item-text">评论记录</span>
        </router-link>
      </li>
      <li>
        <router-link id="like" :to="`/userCenter/${route.params.userId}/like`" class="nav-item">
          <span class="iconfont icon-appreciate"></span>
          <span class="nav-item-text">点赞记录</span>
        </router-link>
      </li>
    </ul>
  </div>
</template>

<style scoped>
/* 左侧导航栏 */
.left-nav {
  width: 170px;
  height: 100%;
  background-color: #fff;
  padding: 10px;
  border-radius: 5px;
}

.left-nav .nav-item {
  display: block;
  width: 100%;
  height: 45px;
  padding: 0 10px;

  display: flex;
  /* 文字垂直居中 */
  align-items: center;

  /* 展示二级导航面板 */
  position: relative;
}

.left-nav .nav-item:hover {
  background-color: rgb(246, 246, 247);
  border-radius: 5px;
  color: #58b128;
}

/* 激活侧边栏 */
.left-nav .active {
  /* 防止:hover效果覆盖 */
  background-color: rgba(179, 224.5, 156.5, 0.5) !important;
  border-radius: 5px;
  color: rgb(63, 112, 38) !important;
}

.left-nav .iconfont {
  font-size: 21px;
}

.left-nav .nav-item-text {
  display: block;
  /* 离图标远点 */
  margin-left: 10px;
  font-size: 16px;
}
</style>